<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            display: block;
        }

        body div {
            padding: 0;
            margin: 0;
        }

        .dao-hang {
            width: 100%;
            min-width: 1200px;
            font-size: 14px;
            height: 90px;
            position: relative;
            z-index: 2;
        }

        .dao-hang .dao-hang-div {
            position: relative;
            margin: 0 auto;
            width: 1200px;
            height: 100%;
        }

        .logo {
            cursor: pointer;
            margin-left: 20px;
            width: 207px;
            height: 100%;
            background-image: url("https://7799520.oss-cn-hangzhou.aliyuncs.com/v2/img/logo.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 203px 43px;
        }

        .dao-hang .dao-hang-div div {
            float: left;
        }

        .dao-hang-div .sh-ye {
            width: 678px;
            height: 88px;
            padding-left: 82px;
        }

        .sh-ye ul {
            list-style: none;
            margin: 32px 0 0 -48px;


        }

        .sh-ye ul li {
            float: left;
            text-align: center;
            line-height: 24px;
            height: 26px;
            padding: 0 11px;
        }

        .sh-ye ul li a {
            color: #666;
        }

        .li-1 {
            background: #ff777b;
            border-radius: 20px;
        }

        .img-div-2 {
            background-image: url("http://7799520.oss-cn-hangzhou.aliyuncs.com/img/header/header.png");
            background-position: 34px -61px;
            background-repeat: no-repeat;
        }

        .dao-hang-div .img-div-2 {
            height: 50px;
            width: 210px;
            margin: 35px 0 0 0px;

            position: relative;
            z-index: 3;
        }

        .img-div-2 span {
            position: absolute;
            top: 4px;
            line-height: 20px;
        }

        .img-div-2 span a {
            color: #fff;
        }

        .zhu-ce {
            left: 65px;
        }

        .deng-ru {
            left: 163px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .btn-group {
            position: absolute;
            left: 238px;
            top: 35px;
            height: 24px;
            width: 52px;
            padding-left: 0;
            border: 0 solid #ddd;
            border-radius: 3px;
            background-position: 40px -530px;
            background-repeat: no-repeat;
            cursor: pointer;
            color: #999;
        }

        .ti-1 {
            position: relative;
            z-index: 1;
            width: 100%;
            border-top: 3px solid #ff7779;
            background: #f8f8f8;
        }

        .ti-fen-lei {
            margin: 0 auto;
            width: 1200px;
        }

        .sou-suo {
            position: relative;
            margin: 47px auto 0;
            border: 1px solid #f2f2f2;
            border-bottom-width: 4px;
            border-radius: 10px;
            background: #fff;
            padding: 20px 40px;
            z-index: 2;
            height: 136px;
        }

        .sou-suo .sou-1 a {
            position: absolute;
            width: 100px;
            height: 32px;
            border-radius: 5px;
            background: #ff777b;
            color: #fff;
            left: 650px;
            bottom: 25px;
            text-align: center;
            line-height: 32px;
            cursor: pointer;
            z-index: 3;
        }

        .ta-j {
            position: relative;
            line-height: 30px;
            z-index: 2;
        }

        .box-1 {
            float: left;
            font-size: 14px;
            color: #3e3e3e;
            margin-right: 30px;
        }

        select {
            float: left;
            background-position: 70px -526px;
            width: 90px;
            height: 30px;
            margin-right: 20px;
        }
        .box-1-1 {
            margin-top: 25px;
        }

        .box-1-2 {
            position: absolute;
            left: 126px;
            top: 75px;
            float: left;
            font-size: 14px;
            color: #3e3e3e;
            margin-right: 30px;
        }
        #marry{
            position: absolute;
            left: 590px;
        }

    </style>
</head>
<body>
<div class="dao-hang">
    <div class="dao-hang-div">
        <div class="logo">
        </div>
        <div class="sh-ye">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li class="li-1">
                    <a href="">同城交友</a>
                </li>
                <li>
                    <a href="">圈子动态</a>
                </li>
                <li>
                    <a href="">全国门店</a>
                </li>
            </ul>
        </div>
        <div class="img-div-2">
            <span class="zhu-ce"><a href="">注册账号</a></span>
            <span class="deng-ru"><a href="">登入</a></span>
        </div>
        <!-- Split button -->
        <div class="btn-group">
            <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                全国 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">北京</a></li>
                <li><a href="#">济南</a></li>
                <li><a href="#">河北</a></li>
                <li><a href="#">福建</a></li>
                <li><a href="#">沈阳</a></li>
                <li><a href="#">辽宁</a></li>
                <li><a href="#">朝鲜</a></li>
                <li><a href="#">黑龙江</a></li>
                <li><a href="#">厦门</a></li>
                <li><a href="#">长沙</a></li>
                <li><a href="#">昆明</a></li>
                <li><a href="#">天津</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
<div class="ti-1">
    <div class="ti-fen-lei">
        <div class="sou-suo">
            <div class="sou-1">
                <a href="">搜缘分</a>
            </div>
            <div class="ta-j">
                <div class="box-1">已选条件</div>
                <div class="box-1">
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">年龄</option>
                        <option value="0">不限</option>
                        <option value="2030">20-30</option>
                        <option value="3140">31-40</option>
                        <option value="4150">41-50</option>
                        <option value="5160">51-60</option>
                        <option value="6161">61以上</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">性别</option>
                        <option value="1">男</option>
                        <option value="01">女</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">城市</option>
                        <option value="">北京</option>
                        <option value="">上海</option>
                        <option value="">福建</option>
                        <option value="">厦门</option>
                        <option value="">长沙</option>
                        <option value="">河北</option>
                        <option value="">河南</option>
                        <option value="">广东</option>
                        <option value="">辽宁</option>
                        <option value="">四川</option>
                        <option value="">昆明</option>
                        <option value="">天津</option>
                        <option value="">黑龙江</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">身高范围</option>
                        <option value="">不限</option>
                        <option value="">150以下</option>
                        <option value="">151-161</option>
                        <option value="">160-170</option>
                        <option value="">170-180</option>
                        <option value="">180-190</option>
                        <option value="">190以上</option>
                    </select>
                    <div class="radio-label" id="marry">
                        <label class="checked">
                            <input type="radio" value="1" name="marry" checked="checked" autocomplete="new-password">未婚
                        </label>
                        <label class="divorced">
                            <input type="radio" value="3" name="marry" autocomplete="new-password">离异
                        </label>
                        <label>
                            <input type="radio" value="4" name="marry" autocomplete="new-password">丧偶
                        </label>
                    </div>
                </div>
            </div>
            <div class="box-1-1">
                <div class="box-1-2">
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">星座</option>
                        <option value="">不限</option>
                        <option value="">射手座</option>
                        <option value="">水瓶座</option>
                        <option value="">金牛座</option>
                        <option value="">天蝎座</option>
                        <option value="">天秤座</option>
                        <option value="">处女座</option>
                        <option value="">双子座</option>
                        <option value="">白羊座</option>
                        <option value="">狮子座</option>
                        <option value="">摩羯座</option>
                        <option value="">双鱼座</option>
                        <option value="">巨蟹座</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">生肖</option>
                        <option value="">不限</option>
                        <option value="">鼠</option>
                        <option value="">牛</option>
                        <option value="">虎</option>
                        <option value="">兔</option>
                        <option value="">龙</option>
                        <option value="">蛇</option>
                        <option value="">马</option>
                        <option value="">羊</option>
                        <option value="">猴</option>
                        <option value="">鸡</option>
                        <option value="">狗</option>
                        <option value="">猪</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">学历</option>
                        <option value="">不限</option>
                        <option value="">小学</option>
                        <option value="">中学</option>
                        <option value="">高中</option>
                        <option value="">中专</option>
                        <option value="">大专</option>
                        <option value="">本科</option>
                        <option value="">硕士</option>
                        <option value="">博士</option>
                        <option value="">院士</option>
                    </select>
                    <select class="btn-sm">
                        <!--如果没有value则提交标签体的内容-->
                        <option selected value="">月薪</option>
                        <option value="">不限</option>
                        <option value="">2000以上</option>
                        <option value="">5000以上</option>
                        <option value="">10000以上</option>
                        <option value="">20000以上</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="../220616-1635257176b5c8.jpg" alt="...">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
        </div>
        </div>
</div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>